<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<input type="text" name="search" id="" value="" placeholder="输入书籍名称"/>
		<input type="button" name="" onclick="search()" value="搜索"></input>
		<input name="add_book" type="button" value="新增书籍"></input>
	 <table id="mytable" border="" cellspacing="" cellpadding="">
	 	<thead>
			<tr>
				<th>id</th>
				<th>书名</th>
				<th>价格</th>
				<th>数量</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody></tbody>
	 </table>
	 <script type="text/javascript">
		 let arr = 
		 [
			 {id: 1, name: 'Java从入门到放弃', price:22, count: 1, account: "hehe"},
			 {id: 2, name: 'Vue从入门到放弃', price:22, count: 1, account: "haha"},
			 {id: 3, name: 'Mysql从入门到放弃', price:22, count: 1, account: "hehe"},
			 {id: 4, name: '啥都从入门到放弃', price:22, count: 1, account: "haha"},
		 ]
		 //判断是否有添加的数据
		 let table =document.getElementById("mytable");
		 let tbody = document.createElement("tbody");
		 let new_book = JSON.parse(localStorage.getItem("new_book"));
		 if(new_book){
			console.log(new_book);
			// arr.push(new_book);
		 	arr = new_book;
		 }else{
		 	localStorage.setItem("new_book",JSON.stringify(arr));
		 }
		 console.log(new_book);
		 updata();
		 //接收添加数据
		 //init初始化函数
	 	function init(){
			$("input[name='add_book']").click(add_book);
			// $("input[name='search']").click(search);
		}
		//清除数据
		function clear(){
			let trs = tbody.children;
			 for(let index in trs){
				 tbody.remove(trs[index]);
			 }
			 tbody=document.createElement("tbody");
			 table.appendChild(tbody);				 
					}
		//添加书籍
		function add_book(){
			localStorage.setItem("add_book",JSON.stringify(arr));
			window.location.href="book_Add.html";
			// updata();
		}
		//修改数据
		function btn_edit(index){
			console.log(arr[index]);
			sessionStorage.setItem("edit_book",JSON.stringify(arr[index]));
			sessionStorage.setItem("edit_arr",JSON.stringify(arr));
			let index_data = index;
			sessionStorage.setItem("index_data",JSON.stringify(index_data));
			window.location.href="book_Edit.html";
		}
		//删除数据
		function btn_del(index){
			arr.splice(index,1);
			localStorage.setItem("new_book",JSON.stringify(arr));
			clear();
			update();
		}
		//搜索数据
		function search(){
			clear();
			let bookname = $("input[name=search]").val();
			console.log(bookname)
			if(JSON.stringify(arr[index]).indexOf(bookname)>=0){
				let tr = document.createElement("tr");
				tbody.appendChild(tr);
				let item = arr[index];
				let td = document.createElement("td");
				td.innerText=item.id;
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText=item.name;
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText=item.price;
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText=item.count;
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerHTML=`<button name="btn_edit">编辑</button><button name="btn_del" Style="background-color:red;color:white;">删除</button>`
				tr.appendChild(td);
			}
			else{
				return null;	
			}
		}
		//初始化表格数据
		function updata(){
			for(index in arr){
				// let item = arr[index];
				// let tr =`
				// <tr>
				// <td>${item.id}</td>
				// <td>${item.type}</td>
				// <td>${item.price}</td>
				// <td>${item.count}</td>
				// <td>
				// <button type="button">编辑</button>
				// <button type="button">删除</button>
				// </td>
				// </tr>
				// `;
				// tbody.append(tr);
		let table =document.getElementById("mytable");
		let tbody = document.createElement("tbody");
		let tr = document.createElement("tr");
		table.appendChild(tbody);
		tbody.appendChild(tr);
				let item = arr[index];
			    let td = document.createElement("td");
				td.innerText=item.id;
				td.title="id";
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText=item.name;
				td.title="type";
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText=item.price;
				td.title="price";
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerText=item.count;
				td.title="count";
				tr.appendChild(td);
				td = document.createElement("td");
				td.innerHTML=`<button onclick=btn_edit(${index})>编辑</button><button onclick=btn_del(${index}) Style="background-color:red;color:white;">删除</button>`
				td.title="noedit";
				tr.appendChild(td);
			}
		}
		init();
	 </script>
	</body>
</html>
